<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                    template="./userTemplate/UserTemplate2.xhtml">

        <ui:define name="Title">
            <title>Product Detail</title>
        </ui:define>
        <ui:define name="content">
            <h:form>
                <div id="wrapper" style="width: 700px;margin: 50px 0px;" >
                    <div id="content" style="width: 700px;height: 250px" >
                        <div id="image" style="width: 300px;float: left;text-align: center" >
                            <p:imageSwitch effect="zoom"  >
                                <ui:repeat value="#{carBean.listAbum}" var="image">
                                    <p:commandLink  onclick="dialog.show()">
                                        <p:graphicImage value="/ImgCar/#{image}" style="width: 300px; height: 200px"/>
                                    </p:commandLink>
                                </ui:repeat>
                            </p:imageSwitch>
                            <p:commandButton type="button" value="Room in" onclick="dialog.show()" icon="ui-icon-search" style="width: 100px;height: 30px;font-size: 0.8em;background-color: #191919;color: white"/>

                            <p:dialog header="Images" widgetVar="dialog" modal="true" draggable="false" resizable="false" style="text-align: center" >
                                <p:imageSwitch effect="wipe" widgetVar="switcher" slideshowAuto="false">
                                    <ui:repeat value="#{carBean.listAbum}" var="image">
                                        <p:graphicImage value="/ImgCar/#{image}" style="width: 650px;height: 470px" />
                                    </ui:repeat>
                                </p:imageSwitch>
                                <p:commandButton type="button" onclick="switcher.previous();" icon="ui-icon-circle-triangle-w"/>
                                <p:commandButton type="button" onclick="switcher.next();" icon="ui-icon-circle-triangle-e"/>
                            </p:dialog>
                        </div>
                        <p:panelGrid style="width: 380px;float: right">
                            <f:facet name="header">
                                <p:row>
                                    <p:column colspan="2">Basic Vehicle</p:column>
                                </p:row>
                            </f:facet>
                            <p:row>
                                <p:column style="font-weight: bold ;width: 400px" >Price</p:column>
                                <p:column style="color: red;width: 400px"><h:outputText value="#{carBean.vehi.price} USD"/> </p:column>
                            </p:row>
                            <p:row>
                                <p:column style="font-weight: bold ;width: 400px" >Name</p:column>
                                <p:column style="color: red;width: 400px"><h:outputText value="#{carBean.vehi.vehilceName}"/> </p:column>
                            </p:row>
                            <p:row>
                                <p:column style="font-weight: bold ;width: 400px" >Cylinder</p:column>
                                <p:column style="color: red;width: 400px"><h:outputText value="#{carBean.vehi.cylinder}"/> </p:column>
                            </p:row>
                            <p:row>
                                <p:column style="font-weight: bold">GearBox</p:column>
                                <p:column style="color: red"><h:outputText value="#{carBean.vehi.gearBox}"/> </p:column>
                            </p:row>
                            <p:row>
                                <p:column style="font-weight: bold">Combustible</p:column>
                                <p:column style="color: red"><h:outputText value="#{carBean.vehi.combustible}"/> </p:column>
                            </p:row>
                            <p:row>
                                <p:column style="font-weight: bold">Seat</p:column>
                                <p:column style="color: red"><h:outputText value="#{carBean.vehi.seat}"/> </p:column>
                            </p:row>
<!--                            <f:facet name="footer">
                                <p:row>
                                    <p:column colspan="2" style="text-align: center" >Detail vehicle</p:column>
                                </p:row>
                            </f:facet>-->
                        </p:panelGrid>

                    </div>
                    <div id="btnorder" style="width: 700px ;text-align: center">
                     <h:commandButton value="Order" action="#{carBean.dathang}" style="width: 130px ;height: 50px;font-size: 2.0em;font-weight: bold"/>
                    </div>

                    <br/><br/><br/>

                    <div id="splienquan" style="text-align: center" >
                        <p:panelGrid style="width: 700px;">
                            <f:facet name="header">
                                <p:row>
                                    <p:column>Product Related</p:column>
                                </p:row>
                            </f:facet>
                        </p:panelGrid>
                        <p:dataGrid var="car" value="#{carBean.listProductLienQuan}" columns="2" rows="2" paginator="true" paginatorTemplate="
                                    {CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" >
                            <p:column>
                                <p:panel header="#{car.vehilceName}" style="text-align:cente ; width: 330px">

                                    <h:panelGrid columns="1" style="width: 150px; height: 100px">
                                        <h:commandLink action="#{carBean.showDetailVehicle(car)}">
                                            <p:graphicImage value="/ImgCar/#{car.image}" style="width: 300px; height: 200px" />
                                        </h:commandLink>
                                        <br/>
                                        <h:outputText value="Price : #{car.price} USD"/>
                                    </h:panelGrid>
                                </p:panel>
                            </p:column>
                        </p:dataGrid>
                    </div>
                </div>
                <!-- <h:dataTable value="{carBean.listvehicle}" var="car">
                     <h:column>
                         <f:facet name="header">
                             <h:outputText value="Vehicle Name"/>
                         </f:facet>
                         <h:outputText value="{car.vehilceName}"/>
                     </h:column>
                 </h:dataTable>
                -->
            </h:form>
        </ui:define>

    </ui:composition>
</html>
